<template>
  <div>
    <el-button type="primary" @click="goback">返回等级列表</el-button>
    <el-form
      :model="typeInfo"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="玩法选择">
        <el-select v-model="typeInfo.game_type" @change="selgame" placeholder="请选择"
        >
          <el-option v-for="item in game_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="等级名称" prop="pass">
        <el-input type="text" v-model="typeInfo.title"></el-input>
      </el-form-item>
      <el-form-item label="赏品类型" prop="checkPass">
        <el-select
          v-model="typeInfo.method_type"
          @change="selmethod"
          placeholder="请选择"
        >
          <el-option
            v-for="item in method_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="赏品描述" prop="checkPass">
        <el-input
          type="text"
          v-model="typeInfo.desc"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="触发次数" prop="checkPass" v-show="show">
        <el-input
          type="numder"
          v-model="typeInfo.num"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="图片">
        <el-upload action="" list-type="picture-card" ref="upload" :on-change="uploadImage">
          <img class="el_upload_img" v-if="typeInfo.img_url" :src="typeInfo.img_url"/>
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import method from "../../../../api/jurisdiction";
export default {
  data() {
    return {
      typeInfo: {},
      game_type: [
        { value: 1, label: "全局赏" },
        { value: 2, label: "一番赏" },
        { value: 3, label: "无限赏" }
      ],
      method_type: [],
      show: false,
      dialogVisible: false,
    };
  },
  created() {
    this.getInfo()
  },
  methods: {
    goback() {
      this.$router.push("/layout/choushangguanli/shangpindengjishezhi")
    },
    getInfo() {
      // 修改
      if (this.$route.params.id) {
        method.getgoodlevelInfo({
          params: {
              level_uuid:this.$route.params.id
          }
        }).then((res) => {
          console.log(res)
          this.typeInfo = res.data.data
        })
      }
    },
    submitForm() {
      if (!this.$route.params.id) {
        if (this.typeInfo.img_url) {
        method
          .postgoodlevel({
            game_type: this.typeInfo.game_type,
            desc: this.typeInfo.desc,
            title: this.typeInfo.title,
            method_type: this.typeInfo.method_type,
            num: this.typeInfo.num,
            img_url: this.typeInfo.img_url,
          })
          .then((res) => {
            if (res.status == 201) {
              this.$message.success("添加成功");
              this.$router.push({ name: "shangpindengjishezhi" });
            } else {
              this.$message.error("添加失败");
            }
          })
          .catch((err) => { 
            console.log(err);
          });
        } else {
        this.$message.warning("图片正在上传");
      }
      } else {
        method.putgoodlevel({
          level_uuid:this.$route.params.id,
          game_type: this.typeInfo.game_type,
          desc: this.typeInfo.desc,
          title: this.typeInfo.title,
          method_type: this.typeInfo.method_type,
          num: this.typeInfo.num,
          img_url: this.typeInfo.img_url,
      }).then((res) => {
        console.log(res)
        this.$message.success("修改成功")
        this.$router.push({ name: "shangpindengjishezhi" })
      })
    }
    },
    selgame(e) {
      console.log(e);
      if (e == 1) {
        this.method_type = [
          { value: 0, label: "普通赏品" },
          { value: 1, label: "全局赏" },
          { value: 2, label: "空车赏" },
          { value: 3, label: "串串赏" },
        ];
      } else if (e == 2) {
        this.method_type = [
          { value: 0, label: "普通赏品" },
          { value: 1, label: "最终赏" },
        ];
      }
    },
    selmethod(e) {
      console.log(e);
      if (e == 0) {
        this.show = false;
      } else if (e == 1) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    uploadImage(upFile) {
      let file = upFile.raw
      let newName = file.name.split('.')
      let num = crypto.randomUUID()
      let path = `houtaiguanli/goodlevel/${num}.${newName[newName.length - 1]}`
      method.uploadImg({ path: path }).then((res) => {
        let result = res.data
        const data = new FormData();
        data.append('key', path);
        data.append('Signature', result.authorization);
        data.append('x-cos-security-token', result.token);
        data.append('x-cos-meta-fileid', result.cos_file_id);
        data.append('file', file, path);
        method.generalAPI(result.url, data).then((a) => {
          method.downloadImg({
            file_list: [
              {
                fileid: res.data.file_id,
                max_age: 0
              }
            ]
          }).then((res) => {
            console.log(res)
            let yunurl = res.data.file_list[0].download_url
            this.typeInfo.img_url = yunurl
            this.$message.success("图片封面上传成功")
          })
        })
      })
    },
  },
};
</script>

<style lang="less" scoped>
.el-input{
  width:250px;
}
.el_upload_img{
  width:175px;
  height: 175px;
}
.el-button{
  margin: 20px 0;
}
</style>
